{include file="public/header"}

<body>
  <div class="layui-fluid">
    <div class="layui-row">
      <form action="" method="post" class="layui-form layui-form-pane">
        <div class="layui-card layui-form" lay-filter="component-form-element">
          <div class="layui-card-header">商品明细</div>
          <div class="layui-card-body layui-table-body layui-table-main">
            <div class="layui-col-md12">
              <a class="layui-btn layui-btn-btn layui-btn-sm layui-btn-normal" onclick="ifarme()">添加商品</a>
              <table class="layui-table layui-form" id="table" lay-filter="table">
                <thead>
                  <tr>
                    <td>
                      <div class="layui-table-cell">商品</div>
                    </td>
                    <td>
                      <div class="layui-table-cell">商品名</div>
                    </td>
                    <td>
                      <div class="layui-table-cell">单位</div>
                    </td>
                    <td>
                      <div class="layui-table-cell">数量</div>
                    </td>
                    <td>
                      <div class="layui-table-cell">单价</div>
                    </td>
                    <td>
                      <div class="layui-table-cell">合计</div>
                    </td>
                    <td>
                      <div class="layui-table-cell">操作</div>
                    </td>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
              <a>计总：<span id="totals">0</span>元</a>
            </div>
          </div>
        </div>

        <div class="layui-card layui-form" lay-filter="component-form-element">
          <div class="layui-card-header">订单备注</div>
          <div class="layui-card-body layui-row layui-col-space10">
            <div class="layui-col-md12">
              <textarea name="remark" placeholder="请输入内容" class="layui-textarea">{$row.descs|default=''}</textarea>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <button class="layui-btn" lay-submit="" lay-filter="add">提交</button>
        </div>
      </form>
    </div>
  </div>
  {include file="public/footer"}
  <script>
    $('body').on('click', '.del2', function () {
      $(this).closest('tr').remove();
    });
    //输入框的值改变时触发
    layui.use(["form", "layer", "upload", 'layarea'], function () {
      $ = layui.jquery;
      var form = layui.form,
        upload = layui.upload,
        element = layui.element,
        layarea = layui.layarea,
        layer = layui.layer;
      layarea.render({
        elem: '#area-picker',
        change: function (res) {
          //选择结果
        }
      });
      //监听提交
      form.on("submit(add)", function (data) {
        //发异步，把数据提交给php
        console.log(data);
        $.ajax({
          type: "post",
          data: data.field,
          success: function (res) {
            if (res.status == 0) {
              layer.msg(res.msg, { icon: 6, time: 1000 }, function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                parent.location.reload();
                parent.layer.close(index);
              });
            } else {
              layer.msg(res.msg, { icon: 2, time: 1000 });
            }
          },
        });
        return false;
      });
    });
    function onblursort(obj) {
      var total = 0;
      var itotal = 0;
      var number = $(obj).parents('tr').find(".number").val();
      var price = $(obj).parents('tr').find(".price").val();
      total = number * price;
      $(obj).parents('tr').find(".total").html(total);
      $(obj).parents('tbody').find("tr").each(function (e, i) {
        var inu = $(i).find(".number").val();
        var ipr = $(i).find(".price").val();
        itotal += inu * ipr;
        $("#totals").html(itotal);
      });
    }
    function ifarme() {
      layer.open({
        type: 2,
        content: '/shop/goods?ifarmeser=1',
        area: ["95%", "95%"],
        btn: ['确认', '取消'],
        yes: function (index, layero) {
          var body = layer.getChildFrame('body', index);
          var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
          var ids = iframeWin.delAll2();//调用子页面的方法，得到子页面返回的ids
          var haveid = [];
          // 获取选中的id 
          $('.goodsid').each(function (index, el) {
            haveid.push($(this).val());
          });
          var getid = [];
          $.each(ids, function (index, value) {
            if ($.inArray(value, haveid) < 0) {
              getid.push(value);
            }
          });
          //发异步，把数据提交给php
          $.ajax({
            url: '/base/getgoods',
            type: "get",
            data: { id: getid },
            success: function (res) {
              if (res.status == 0) {
                var html = '';
                $.each(res.data, function (index, value) {
                  html += '<tr><td><img style="height:50px;"src="' + value.images + '"alt="' + value.title + '"></td><td><div class="layui-table">' + value.title + '</div></td><td><div class="layui-table">' + value.unmit + '</div></td><td><div class="layui-table"><input type="number" onblur="onblursort(this)" name="goodsid[' + value.id + '][number]"    required="" lay-verify="required" class="layui-input number" value="0"></div></td><td><div class="layui-table"><input type="number" name="goodsid[' + value.id + '][price]"    required="" lay-verify="required" class="layui-input price" onblur="onblursort(this)" value="' + value.price + '"></div></td><td><div class="layui-table"><div class="total"/>0</div></div></td><td><input type="hidden" class="goodsid" name="goodsid[' + value.id + '][id]" value="' + value.id + '"lay-skin="primary"><a class="layui-btn layui-btn-danger layui-btn-xs del2">删除</a></td></tr>';
                });
                $(html).appendTo($('#table tbody:last'));
                layui.use(['form'], function () {
                  $ = layui.jquery;
                  var form = layui.form;
                  form.render();
                });
                layer.close(index);
              } else {
                layer.msg('添加失败，请重试', { icon: 2, time: 1000 });
              }
            },
          });
          return false;
        }
      });
    }
  </script>
</body>